<!DOCTYPE html>

<head>
    <meta name='viewport' content='width=device-width, initial-scale=1' charset="utf-8" />
    <title>yobot用户面板</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css">
    <style>
        body{
        text-align:center;
        margin:0;
        }
    
        h1 {
        font-family: 'Lato', sans-serif;
        font-weight:300;
        letter-spacing: 2px;
        font-size:48px;
        }
        
        p {
        font-family: 'Lato', sans-serif;
        letter-spacing: 1px;
        font-size:14px;
        color: #333333;
        }

        .el-button {
        margin: 0 5px;
        }
    
        .header {
        position:relative;
        text-align:center;
        background: linear-gradient(60deg,rgba(43,122,205,1) 0%,rgba(0,90,180,1) 100%);
        color:white;
        }
    
        .inner-header {
        height:150px;
        width:100%;
        margin: 0;
        padding: 0;
        }
    
        .flex { /*Flexbox for containers*/
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        }
    
        .waves {
        position:relative;
        width: 100%;
        height:40px;
        margin-bottom:-7px; /*Fix for safari gap*/
        min-height:60px;
        max-height:120px;
        }
    
        .content {
        position:relative;
        height:20vh;
        text-align:center;
        background-color: white;
        }
    
        /* Animation */
    
        .parallax > use {
        animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
        }
        
        .parallax > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
        }
        
        .parallax > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
        }
        
        .parallax > use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
        }
        
        .parallax > use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
        }
        
        @keyframes move-forever {
        0% {
            transform: translate3d(-90px,0,0);
            }
        100% { 
            transform: translate3d(85px,0,0);
            }
        }
        
        /*Shrinking for mobile*/
        @media (max-width: 768px) {
            .waves {
            height:40px;
            min-height:40px;
            }
            .content {
            height:30vh;
            }
            h1 {
            font-size:24px;
            }
        }
        </style>
</head>

<body>
    <div class="header">

		<div class="inner-header flex">
			<h1>Yobot用户面板</h1>
		</div>
		<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28"
		 preserveAspectRatio="none" shape-rendering="auto">
			<defs>
				<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
			</defs>
			<g class="parallax">
				<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
				<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
				<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
				<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
			</g>
		</svg>
	</div><br>
    <div id="app">
        <el-alert v-if="localStorage.yobot_free_statement!=='true'" title="yobot 软件始终免费" description="yobot 软件始终免费，任何人都可以部署在自己的服务器上。yobot 不禁止商业使用，鼓励有能力的用户自行搭建。" center effect="dark" type="info" close-text="不再提醒" @close="localStorage.yobot_free_statement='true'"></el-alert>
        <div><strong>欢迎，{{ user.nickname }}</strong></div>
        <p>上次登录：[[ from_ts({{ session.get('last_login_time') }}) ]] 在 [[ addr.join('') ]]
        </p>
        {% if user.authority_group < 10 -%}
        <el-row>
            <a href="{{ url_for('yobot_setting') }}">
                <el-button type="primary">设置项</el-button>
            </a>
            <a href="{{ url_for('yobot_users_managing') }}">
                <el-button type="primary">用户管理</el-button>
            </a>
            <a href="{{ url_for('yobot_groups_managing') }}">
                <el-button type="primary">群管理</el-button>
            </a>
        </el-row>
        <br />
        {%- endif %}
        <el-row>
            <a href="{{ url_for('yobot_user_info', qqid=user.qqid) }}">
                <el-button type="primary">个人中心</el-button>
            </a>
            <a href="{{ url_for('yobot_reset_pwd') }}">
                <el-button type="primary">修改密码</el-button>
            </a>
            <a href="{{ url_for('yobot_logout') }}">
                <el-button type="primary">退出登录</el-button>
            </a>
        </el-row>
        <br />
        <el-row>
            {% if not clan_groups -%}
            <el-tooltip effect="dark" placement="bottom">
                <div slot="content">你还没有选择默认公会<br />请在你的公会群里发送“加入公会”来设置默认公会</div>
                <el-button type="primary" disabled>无公会</el-button>
            </el-tooltip>
            {%- else -%}
            {% for group in clan_groups -%}
            <div style="width: 100%;">
            <a href="{{ url_for('yobot_clan', group_id=group['group_id']) }}">
                <el-button type="primary">公会：{{ group['group_name'] }}</el-button>
            </a>
            </div>
            <br />
            {% endfor -%}
            {%- endif %}
        </el-row>
        <a href="{{ url_for('yobot_about') }}">
            <el-button size="mini" style="margin-top: 10px;">关于yobot</el-button>
        </a>
    </div>
    <br />
    <el-footer style="position: fixed;bottom: -10px;left: 50%;transform: translate(-50%, -50%);background-color: #66b1ff;color: #ffffff;
width: 100%;font-size:15px;">
        powered by <a href="https://github.com/pcrbot/yobot" style="text-decoration:none;color: #ffffff;">yobot</a>
    </el-footer>
</body>
<script>
    if (!Object.defineProperty) {
        alert('浏览器版本过低');
    }
    new Vue({
        el: '#app',
        data: {
            addr: [],
        },
        mounted() {
            var thisvue = this;
            axios.get('{{ url_for("yobot_api_iplocation", ip=session["last_login_ipaddr"]) }}').then(function (res) {
                thisvue.addr = res.data;
            }).catch(function (error) {
                console.log(error);
                thisvue.addr = ['未知'];
            });
        },
        methods: {
            from_ts: function (ts) {
                if (ts == 0) {
                    return '-';
                }
                var nd = new Date();
                nd.setTime(ts * 1000);
                return nd.toLocaleString('chinese', { hour12: false });
            },
        },
        delimiters: ['[[', ']]'],
    })
</script>

</html>